import Phaser from 'phaser';

import UtilsCoordinateConter from '../../../utils/Utils.coordinate.conter/UtilsCoordinateConter';
import UtilsLoader from '../../../utils/Utils.loader/UtilsLoader';
import SaveSceneExampleQueue from '../../../utils/Utils.SaveSceneExampleQueue/UtilsSaveSceneExampleQueue';

export default class SceneUiHead extends Phaser.Scene {
    constructor() {
        super({
            key: 'SceneUiHead'
        });

        this.headFrame = null;
        this.sun = null;
        this.dusk = null;
        this.night = null;

        this.WWC = UtilsCoordinateConter.coordinatrConter('world').WWC;
        this.WHC = UtilsCoordinateConter.coordinatrConter('world').WHC;
        this.WFW = UtilsCoordinateConter.coordinatrConter('worldFull').WFW;
        this.WFH = UtilsCoordinateConter.coordinatrConter('worldFull').WFH;
        this.VWC = UtilsCoordinateConter.coordinatrConter('view').VWC;
        this.VHC = UtilsCoordinateConter.coordinatrConter('view').VHC;
        this.VFW = UtilsCoordinateConter.coordinatrConter('viewFull').VFW;
        this.VFH = UtilsCoordinateConter.coordinatrConter('viewFull').VFH;
    }

    init() {
        console.log('SceneUiHead init!');

        SaveSceneExampleQueue.enQueue({
            'SceneUiHead': this
        });
    }

    preload() {
        console.log('SceneUiHead pre!');

        this.IMAGE_LOAD()

    }

    create() {
        console.log('SceneUiHead create!');

        this.headFrame = this.add.image(110, 24, 'headFrame')
        .setInteractive();

        this.sun = this.add.image(240, 24, 'sun')
        .setScale(.2)
        .setInteractive();

        this.dusk = this.add.image(290, 24, 'dusk')
        .setScale(.2)
        .setInteractive();

        this.night = this.add.image(340, 24, 'night')
        .setScale(.26)
        .setInteractive();

        this.onClick();
    }

    IMAGE_LOAD() {
        new UtilsLoader('image', [{
            key: 'headFrame',
            path: '/images/phaser/headFrame.png'
        },{
            key: 'sun',
            path: '/images/phaser/sun.png'
        },{
            key: 'dusk',
            path: '/images/phaser/dusk.png'
        },{
            key: 'night',
            path: '/images/phaser/night.png'
        }], 'http://localhost:3001', this, (e) => {
            console.log(e);
        });
    }

    onClick() {
        // on head...
        this.headFrame.on('pointerdown', () => {
            this.events.emit('onHeadClick', '点击playerHead!');
        });
        // on sun
        this.sun.on('pointerdown', () => {
            this.events.emit('onSunClick', '点击太阳!');
        });
        // on dusk
        this.dusk.on('pointerdown', () => {
            this.events.emit('onDuskClick', '点击黄昏!');
        });
        // on nught
        this.night.on('pointerdown', () => {
            this.events.emit('onNightClick', '点击夜晚!');
        });
    }

}